<template>
  <div class="container" style="width:98vw;height:100vh;background:skyblue; ">
    <div style="width:70vw;height:70vh;margin:auto;background:#fefbfc; border-radius:10px;">
      <div style="float:left">
        <img :src="imgSrc" alt="">
      </div>
      <div style="float:right;width: 40vw; position: relative;">
          <h4>注册页面</h4>
            <el-button type="text" @click="open" style="  position:absolute;top:0px;right:0px;"><img :src="img_erweima1" alt=""></el-button>
  用户名：<el-input v-model="user" placeholder="请输入内容"></el-input>
  <br>  <br> 
 密码： &emsp;<el-input placeholder="请输入密码" v-model="pwd" show-password></el-input>
    <br>  <br>
邮箱：<el-input placeholder="请输入邮箱" v-model="emails" id="emails"></el-input><br>  <br>


 <el-button type="primary" round  @click="btnfun()">点击注册</el-button>
      </div>
     
    </div>

  </div>
</template>

<script>

import axios from 'axios'
export default {
  data() {
    return {
      imgSrc:require('../../assets/axios_img/zuo2.png'),
      img_erweima1:require('../../assets/axios_img/微信登录切换@2x.png'),
      img_erweima2:require('../../assets/axios_img/微信二维码@2x.png'),
      user:'',
      pwd:'',
      emails:'',
     
    }
  },
  created(){
   
  },
  methods:{
    btnfun(){
        axios({
        method:'post',
        url:'http://47.94.4.201/index.php/index/index/register',
        data:{
            emails:this.emails,
            name:this.user,
            pwd:this.pwd,
        }
        }).then((res)=>{
            // console.log(res)
          if(res.data.code==0){
             alert('注册成功')
        clearTimeout(this.timer);  //清除延迟执行 
        this.timer=setTimeout(()=>{  //设置延迟执行
             this.$router.push({name:'login'})
        },1000);
           
          }else if(res.data.code==3){
            alert('用户名重复')
          }else if(res.data.code==2){
            alert('用户，密码或邮箱不能为空')
          }else{
           console.log(res)
          }
        
        })
    },
     open() {
        this.$alert("内容", '标题名称', {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      },
 },
  components: {

  }
}
</script>

<style scoped>
 #app nav{
        display: none;
    }
.el-input{
  width:70%;


 
}
.el-input #emails{
   width:40%;
}
</style>
